<template>
	<view class="main">
		<u-cell-group>
			<view class="a" style="margin-top: 2px;">
				<u-cell>
					<text slot="icon" style="font-size: 17px;color: #212121;">{{ '调度信息' }}</text>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">指令名称</view>
					<view slot="right-icon" class="contentText">{{data.zlmc}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">接收人姓名</view>
					<view slot="right-icon" class="contentText">{{data.jsrxm}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">创建时间</view>
					<view slot="right-icon" class="contentText">{{data.createdTime}}</view>
				</u-cell>
				<u-cell :border="false" class="test">
					<view slot="title" class="titleText" style="padding-top: 3px;">指令内容</view>
					<text slot="right-icon"
						style="width:60vw; white-space: normal; word-wrap: break-word; text-align: right; font-size: 14px; line-height: 24px; color:  #212121;">{{ data.zlnr }}</text>
				</u-cell>
			</view>
			<view class="b">
				<u-cell>
					<text slot="icon" style="font-size: 17px;color: #212121;">{{ '反馈信息' }}</text>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">反馈时间</view>
					<view slot="right-icon" class="contentText">{{data.fksj}}</view>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="titleText">反馈状态</view>
					<view slot="right-icon" class="contentText">{{data.fkzt}}</view>
				</u-cell>
				<u-cell :border="false" class="test">
					<view slot="title" class="titleText" style="padding-top: 3px;">反馈描述</view>
					<text slot="right-icon"
						style="width:60vw; white-space: normal; word-wrap: break-word; text-align: right; font-size: 14px; line-height: 24px; color:  #212121;">{{ data.fkms }}</text>
				</u-cell>
			</view>
			<view class="c">
				<u-cell>
					<text slot="icon" style="font-size: 17px;color: #212121;">{{ '反馈附件' }}</text>
				</u-cell>
				<view class="imgs" style="display: flex;flex-direction: column;padding: 0px 16px 20px 16px;">
					<view class="img" :style="getWidth()" v-for="(item,index) in data.fkfjList" :key="index">
						<img :src="item.url" :style="getImageStyle()" />
					</view>
				</view>
			</view>
		</u-cell-group>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		getDateDic,
		getDetailZL
	} from '@/common/api.js'
	export default {
		onLoad: function(option) {
			this.getDic()
			uni.setNavigationBarTitle({
				title: option.title + '详情'
			});
			this.getDetail(option.id)
		},
		onShow() {
			document.body.style.overflow = 'auto';
		},
		data() {
			return {
				/* 字典 */
				dic: {
					status: 'Enabled',
					type: 'ORDER_FKZT'
				},
				dicList: [],
				/* 详情 */
				data: {}
			}
		},
		methods: {
			getDic() {
				getDateDic(this.dic).then(res => {
					this.dicList = res
				})
			},
			getDetail(id) {
				getDetailZL({
					id: id
				}).then(res => {
					this.data = {
						...res
					}
					const dateTemp = this.dicList.find(date => date.code === this.data.fkzt);
					if (dateTemp) {
						this.data.fkzt = dateTemp.name;
					}
				})
			},
			getWidth() {
				let a = uni.getSystemInfoSync().windowWidth
				let b = a - 32
				return {
					'width': b
				}
			},
			getWidths() {
				let a = uni.getSystemInfoSync().windowWidth
				let b = a - 32
				return b + 'px'
			},
			getImageStyle() {
				let a = uni.getSystemInfoSync().windowWidth
				let b = a - 32
				return {
					'width': b + 'px',
					'height': 'auto',
					'object-fit': 'cover',
					'padding-top': '5px'
				}
			}
		},
		mounted() {

		}
	}
</script>

<style>
	.titleText {
		font-family: 'PingFangSC-Regular';
		font-size: 14px;
		color: #999999;
		font-weight: 400;
	}

	.contentText {
		font-family: 'PingFangSC-Regular';
		font-size: 14px;
		color: #212121;
		text-align: right;
		font-weight: 400;
	}

	.test>>>.u-cell__body {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
</style>